<template>
  <div class="nav-header">
    <div class="logo">广播电台发射塔监测系统</div>
    <div class="nav-list">
      <div
        class="nav-item"
        v-for="(item, index) in urlList"
        :key="index"
        :class="{ active: item.path === $route.path }"
        @click="goTo(item.path)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="header-right">
      <div class="date-box">
        <span>{{ weekText }}</span>
        <span>{{ dateText }}</span>
      </div>
      <div class="shu"></div>
      <div id="clock"></div>
      <el-dropdown
        class="avatar-container right-menu-item hover-effect"
        trigger="click"
      >
        <div class="avatar-wrapper">
          <img :src="avatar" class="user-avatar" />
          <span>{{ username }}</span>
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item divided @click.native="logout">
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import Cookies from "js-cookie";
export default {
  name: "navHeader",
  data() {
    return {
      username: "",
      dateText: "",
      weekText: "",
      urlList: [
        { path: "/dpindex", name: "实时监测" },
        { path: "/alertEvent", name: "告警事件" },
        { path: "/algorithm", name: "算法模型" },
        { path: "/analysis", name: "数据分析" },
        { path: "/systemSetting", name: "系统配置" },
      ],
    };
  },
  created() {
    this.username = Cookies.get("username");
    this.formatCurrentDateTime();
    setInterval(this.updateTime, 1000);
  },
  computed: {
    ...mapGetters(["avatar"]),
  },
  methods: {
    updateTime() {
      const now = new Date();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();
      const formattedTime = `${this.padTo2Digits(hours)}:${this.padTo2Digits(
        minutes
      )}:${this.padTo2Digits(seconds)}`;
      document.getElementById("clock").textContent = formattedTime; // 更新页面上的时钟元素
    },
    padTo2Digits(num) {
      return num.toString().padStart(2, "0");
    },
    formatCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的，所以需要+1
      const day = String(now.getDate()).padStart(2, "0");
      const weekday = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ][now.getDay()];
      this.dateText = ` ${year}.${month}.${day}`;
      this.weekText = ` ${weekday}`;
    },
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/dpindex";
          });
        })
        .catch(() => {});
    },
    goTo(path) {
      this.$router.push({ path });
    }
  },
};
</script>
<style lang="scss" scoped>
.nav-header {
  width: 100%;
  height: 80px;
  background: url("../../../assets/images/nav-bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
  .logo {
    width: 21%;
    font-family: "youshe";
    font-size: 32px;
    font-weight: normal;
    line-height: 52px;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, #ffffff -5%, #ffffff 37%, #b4cff2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
  .nav-list {
    width: 50%;
    display: flex;
    align-content: center;
    .nav-item {
      font-display: "jinbuti";
      font-size: 22px;
      font-weight: 500;
      line-height: 60px;
      font-style: oblique;
      color: #acbac2;
      width: 200px;
      text-align: center;
      cursor: pointer;
    }
    .active{
        color: #fff;
        background: url('../../../assets/images/nav-item.png') center 100% no-repeat;
    }
  }
  .header-right {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .date-box {
      color: #fff;
      font-size: 14px;
      span {
        display: block;
        text-align: right;
      }
    }
    .shu {
      width: 1px;
      height: 12px;
      background: #ffc000;
      margin: 0 10px;
    }
    #clock {
      font-size: 30px;
      font-weight: 500;
      line-height: 40px;
      display: flex;
      align-items: center;
      letter-spacing: 0em;
      color: #ffffff;
      margin-right: 20px;
      background: linear-gradient(
        180deg,
        #ffffff -5%,
        #ffffff 37%,
        #b4cff2 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
    .avatar-container {
      .avatar-wrapper {
        display: flex;
        align-items: center;
        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        span {
          color: #fff;
          font-size: 16px;
          margin: 0 5px;
          display: block;
        }
        .el-icon-caret-bottom {
          cursor: pointer;
          font-size: 12px;
          color: #fff;
        }
      }
    }
  }
}
</style>
